<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/template/template.xhtml">
	<ui:define name="head">
		<style>
#WrapProtectTimeLine {
	height: 100px;
	padding-top: 20px;
}
</style>

	</ui:define>
	<ui:define name="content">
		<div class='full-center-content-scroll-noheader'>
			<div id="WrapProtectTimeLine" class="col-sm-12 col-lg-12">
				<div id="protectTimeLine" style="height: 50px"></div>
			</div>
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs pull-left">
					<li class="active"><a href="#totalCase" data-toggle="tab">总体情况</a></li>
					<li><a href="#detailedCase" id="detailedCaseTab"
						data-toggle="tab">具体情况</a></li>
				</ul>
				<div class="tab-content no-padding">
					<div class="chart tab-pane active" id="totalCase"
						style="position: relative">
						<div class='col-sm-12'>
							<div class='info-box bg-green'>
								<span class='info-box-icon'> <i
									class='icon ion-pie-graph'></i>
								</span>
								<div class='info-box-content'
									style='height: 90px; line-height: 90px; font-size: 18px'>
									<span class='year'>2010</span>年550kV继电保护共发生缺陷<span class='totalNum'></span>起，已消缺<span class='reality'></span>起，消缺率为<span class='rate'></span>,及时消缺率为<span class='timelyRate'></span>。</div>
							</div>
						</div>
						<div class='col-sm-12'>
							<div class='box box-info'>
								<div class='box-header'>
									<h6 class='box-title'>按缺陷省区划分</h6>
								</div>
								<div class='box-body'>
									<div id='province' style="height: 250px"></div>
								</div>
							</div>
						</div>
						<div class='col-sm-12'>
							<div class='box box-success'>
								<div class='box-header'>
									<h6 class='box-title'>按缺陷类别划分</h6>
								</div>
								<div class='box-body'>
									<div id='category' style="height: 250px"></div>
								</div>
							</div>
						</div>
						<div class='col-sm-12 '>
							<div class='box box-danger'>
								<div class='box-header'>
									<h6 class='box-title'>按缺陷设备划分</h6>
								</div>
								<div class='box-body'>
									<div id='device' style="height: 250px"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="chart tab-pane" id="detailedCase"
						style="position: relative">
						<!-- <div class='col-sm-12'>
							<div class='box'>
								<div class='box-header'>
									<h6 class='box-title'>按缺陷种类划分</h6>
								</div>
								<div class='box-body'>
									<div class='col-sm-6'>
										<div id='property' style="height: 250px"></div>
									</div>
								</div>
							</div>
						</div> --> 
						<div class='col-sm-12 no-padding'>
							<div class="box box-info" id="protectorPanel">
								<div class='box-header with-border'>
									<h6 class='box-title'>保护装置缺陷</h6>
								</div>
								<div class='box-body'>
									<div class='col-sm-12 no-padding'>
										<div class='info-box bg-green'>
											<span class='info-box-icon'> <i
												class='icon ion-pie-graph'></i>
											</span>
											<div class='info-box-content'
												style='height: 90px; line-height: 90px; font-size: 18px'>
												<span class='year'>2010</span>年，共发生<span class='proNum'></span>起保护装置缺陷，占缺陷总数<span class='proRate'></span>。</div>
										</div>
									</div>
									<div class='col-sm-6'>
										<div class='box box-warning'>
											<div id='protectorDefPosition' style="height: 250px"></div>
										</div>
									</div>
									<div class='col-sm-6 '>
										<div class='box box-warning'>
											<div id='protectorDefCause' style="height: 250px"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class='col-sm-12 no-padding'>
							<div class="box box-info" id="secondCircuitPanel">
								<div class='box-header with-border'>
									<h6 class='box-title'>二次回路缺陷</h6>
								</div>
								<div class='box-body'>
									<div class='col-sm-12 no-padding'>
										<div class='info-box bg-green'>
											<span class='info-box-icon'> <i
												class='icon ion-pie-graph'></i>
											</span>
											<div class='info-box-content'
												style='height: 90px; line-height: 90px; font-size: 18px'>
												<span class='year'>2010</span>年，共发生<span class='secNum'></span>起保护装置二次回路缺陷，占缺陷总数<span class='secRate'></span>。</div>
										</div>
									</div>
									<div class='col-sm-6'>
										<div class='box box-warning'>
											<div id='secondDefPosition' style="height: 250px"></div>
										</div>
									</div>
									<div class='col-sm-6'>
										<div class='box box-warning'>
											<div id='secondDefCause' style="height: 250px"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class='col-sm-12 no-padding'>
							<div class="box box-info" id="protectorPanel">
								<div class='box-header with-border'>
									<h6 class='box-title'>保护通道缺陷</h6>
								</div>
								<div class='box-body'>
									<div class='col-sm-12 no-padding'>
										<div class='info-box bg-green'>
											<span class='info-box-icon'> <i
												class='icon ion-pie-graph'></i>
											</span>
											<div class='info-box-content'
												style='height: 90px; line-height: 90px; font-size: 18px'>
												<span class='year'>2010</span>年，共发生<span class='channelNum'></span>起保护通道缺陷，占缺陷总数<span class='channelRate'></span>。</div>
										</div>
									</div>
									<div class='col-sm-6'>
										<div class='box box-warning'>
											<div id='channelDefPosition' style="height: 250px"></div>
										</div>
									</div>
									<div class='col-sm-6'>
										<div class='box box-warning'>
											<div id='channelDefCause' style="height: 250px"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/timeline.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js"></script>
		<script src='protectDefect.js'></script>
		<script>
			 $(function() {
				var t1 = window.setInterval(function() {
					var w = $('#WrapProtectTimeLine').width() + "";
					if (w != '0') {
						$('#province').css('width', w );
						$('#category').css('width', w );
						$('#device').css('width', w );
						window.clearInterval(t1);
					}
				}, 20);
				$('#detailedCaseTab').click(function() {
					var w = $('#detailedCase').width() + "";
					//$('#property').css('width', w / 2 - 20);
					$('#protectorDefPosition').css('width', w / 2-45);
					$('#protectorDefCause').css('width', w / 2-45);
					$('#secondDefPosition').css('width', w / 2 -45);
					$('#secondDefCause').css('width', w / 2 -45);
					$('#channelDefPosition').css('width', w / 2-45 );
					$('#channelDefCause').css('width', w / 2-45);
					//propertyChart.resize();
					
					proDefectPartChart.getChart().resize();
					proDefectCauseChart.getChart().resize();
					secDefectPartChart.getChart().resize();
					secDefectCauseChart.getChart().resize();
					channelDefPartChart.getChart().resize();
					channelDefCauseChart.getChart().resize();
				});
			}) 
		</script>
	</ui:define>
</ui:composition>
